<template>
    <div class="box">
        <ul>
            <li v-for="item in list" :key=item.id @click=handleClick(item.id)>
                {{item.id}} -- {{item.name}}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  data(){
    return {
        list:[
            {
                id:"001",
                name:"怒火重案"
            },
            {
                id:"002",
                name:"导火线"
            },
            {
                id:"003",
                name:"大话西游"
            }
        ]
    }
  },
  methods:{
      handleClick(id){
        //   location.href="/detail?id="+id;
        this.$router.push("/detail?id="+id)  //参数在$route.query里
        // this.$router.push("/detail/"+id) //动态路由 参数在$route.params里 
        // this.$router.push({
        //     name:"myDetail",
        //     params:{
        //         id
        //     }
        // }) //命名路由 把参数放在params防止在url中被看见
      }
  },
}
</script>

<style scoped>
    .box{
        background: red;
    }
</style>